<template>
  <div class="my-container">
    <div class="my-header">
      <CommonHeader :leftIcon="true" />

      <div class="my-user" @click="onLogin">
        <van-image class="my-user_img" :src="myUser" />

        <div>
          <div v-if="!isLogin" class="my-user-zh">请登录账号</div>
          <div v-else>
            <div>
              <span class="my-user-zh">
                {{ userInfo.UserLoginName }}
              </span>
            </div>
            <div class="margin-top-5">
              <span class="my-user-qy">
                备案者：{{ userInfo.EnterprisePersonName }}
              </span>
            </div>
            <div class="margin-top-5">
              <span class="my-user-type">
                {{ userInfo.UserTypeID }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-content">
      <div v-if="showTs" class="my-ts-content">
        <div class="my-ts-item">
          <img style="width: 16px" :src="tanhao" />
          <span class="my-ts-item-title">
            请完善备案信息，信息不全将无法备案
          </span>
          <van-button
            type="primary"
            color="rgb(231, 255, 246)"
            round
            block
            style="
              text-align: right;
              width: 78px;
              height: 24px;
              padding: 0;
              color: rgb(22, 206, 138);
            "
            @click="onBazxx"
            >立即完善</van-button
          >
        </div>
      </div>
      <div class="my-xxfw">
        <div class="my-xxfw">
          <van-cell
            class="my-xxfw-item"
            title="修改密码"
            is-link
            @click="editPwd"
          >
            <template #icon>
              <van-icon class="my-xxfw-icon" :name="myXgmm" />
            </template>
          </van-cell>
          <van-cell
            class="my-xxfw-item"
            title="备案指南"
            is-link
            @click="baznClick"
          >
            <template #icon>
              <van-icon class="my-xxfw-icon" :name="myBazn" />
            </template>
          </van-cell>
          <van-cell
            class="my-xxfw-item"
            title="我要提问"
            is-link
            @click="twClick"
          >
            <template #icon>
              <van-icon class="my-xxfw-icon" :name="myWytw" />
            </template>
          </van-cell>
          <van-cell v-if="false" class="my-xxfw-item" title="检查更新" is-link>
            <template #icon>
              <van-icon class="my-xxfw-icon" :name="myJcgx" />
            </template>
          </van-cell>
        </div>
      </div>

      <div style="margin: 16px">
        <van-button
          type="primary"
          color="#FFFFFF"
          round
          block
          style="color: #222222; margin: 0px"
          @click="loginout"
          >退出登录</van-button
        >
      </div>
    </div>

    <XiuGaiMiMaView :show="showXgmm" @update:show="showXgmm = $event" />
  </div>
</template>

<script setup>
import "@/assets/css/tabs.css";
import { ref, onMounted, watch, nextTick } from "vue";
import { useRoute, useRouter } from "vue-router";
import activeTab from "@/store/tabstate.js";
import myUser from "@/assets/img/my_user.png";
import myXgmm from "@/assets/img/my_xgmm2.png";
import myBazn from "@/assets/img/my_bazn.png";
import myWytw from "@/assets/img/my_wytw.png";
import myJcgx from "@/assets/img/my_jcgx.png";
import tanhao from "@/assets/img/tanhao.png";
import uiUtil from "@/util/UiUtil.js";
import XiuGaiMiMaView from "@/components/login/XiuGaiMiMaView.vue";
import { el } from "element-plus/es/locales.mjs";

const tabstate = activeTab();
const router = useRouter();
const route = useRoute();
const showTs = ref(false);
const isLogin = ref(false);
const showXgmm = ref(false);
const userInfo = ref({});
onMounted(() => {
  try {
    userInfo.value = JSON.parse(localStorage.getItem("user"));
    isLogin.value =
      userInfo.value &&
      userInfo.value.UserID &&
      userInfo.value.UserID.length > 0;
    console.log(isLogin.value);
  } catch (e) {
    console.log(e);
  }
});

const onLogin = () => {
  if (!isLogin.value) {
    router.push({ path: uiUtil.routerPath.login });
  }
};

const loginout = () => {
  localStorage.setItem("user", "{}");
  localStorage.setItem("token", "");
  isLogin.value = false;
  userInfo.value = {};
  // router.push({ path: '/' });
  // window.location.reload()
};

const editPwd = () => {
  if (isLogin.value) {
    showXgmm.value = true;
  } else {
    onLogin();
  }
};
const baznClick = () => {
  router.push({ path: uiUtil.routerPath.HandbookListPage });
};
const twClick = () => {
  router.push({ path: uiUtil.routerPath.QuestionListPage });
};
</script>

<style lang="less" scoped>
.my-container {
  background: url("@/assets/img/main/home_bg.png") no-repeat;
  background-size: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.my-header,
.my-footer {
  flex: 0 0 auto;
  text-align: center;
  padding: 0;
}

.my-content {
  flex: 1 1 auto;
  overflow-y: auto;
}

.my-user {
  display: flex;
  text-align: left;
}

.my-user_img {
  margin-left: 12px;
  margin-right: 12px;
  width: 74px;
  height: 74px;
  margin-bottom: 19px;
}

.my-user-zh {
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
}

.margin-top-5 {
  margin-top: 5px;
}

.my-user-qy {
  margin: 8px 0;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

.my-user-type {
  margin-top: 4px;
  font-size: 10px;
  border-radius: 30px;
  font-weight: 400;
  color: #966b0c;
  padding: 4px 8px;
  background-color: #ffe482;
}

.my-cygn {
  background-color: white;
  border-radius: 4px 4px 0 0;
}

.my-cygn-title {
  align-items: center;
  margin: 0;
  padding: auto;
  padding: 12px;
  text-align: left;
  color: #222;
  font-size: 16px;
  font-weight: 500;
}

.my-cygn-content {
  /* 使用弹性盒布局 */
  display: flex;
  /* 子元素间距均匀分布 */
  justify-content: space-around;
  margin-top: 12px;
}

.my-cygn-content-item {
  /* 子元素宽度 */
  width: 100px;
  /* 文字居中 */
  text-align: center;
}

.my-cygn-content-item-title {
  font-size: 13px;
  font-weight: 400;
  color: rgb(136, 136, 136);
}

.my-cygn-content-item-count {
  margin-top: 6px;
  margin-bottom: 16px;
  font-size: 12px;
  font-weight: 400;
  color: rgb(34, 34, 34);
}

.my-cygn-content-item-img {
  width: 42px;
  height: 42px;
}

.my-xxfw {
  background-color: #f3f9f8;
}

.my-xxfw-item {
  --van-cell-right-icon-color: #000 !important;
}

.my-xxfw-icon {
  padding-top: 5px;
  margin-right: 8px;
}

.my-ts-content {
  margin: 0 12px;
}

.my-ts-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background-color: #000;
  border-radius: 10px 10px 0 0;
}

.my-ts-item img {
  margin-right: 8px;
}

.my-ts-item-title {
  font-size: 12px;
  font-weight: 400;
  color: rgb(255, 231, 185);
  flex: 1;
}

.my-ts-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.my-ts-row {
  display: flex;
  width: 100%;
}

.my-ts-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 8px;
  /* 可选: 根据需要调整高度 */
}

.my-ts-centered-image {
  width: 16px;
  height: 8px;
}

.my-ts-item {
}
</style>
